<template>
    <div class="myIndexBox">
        <div class="myhead">
            <div class="myheadWarp"></div>
            <h3>用户昵称</h3>
        </div>
        <ul class="mymenuBox">
            <li>
                <img src="./img/icon_self@2x.png">
                <span>账号管理</span>
            </li>
            <li>
                <img src="./img/icon_yizhan@2x.png">
                <span>我的易栈</span>
            </li>
            <li>
                <img src="./img/icon_jf@2x.png">
                <span>我的积分</span>
                <span class="jf">200积分</span>
            </li>
        </ul>
        <ul class="mymenuBox">
            <li>
                <img src="./img/icon_hd@2x.png">
                <span>阅享生活</span>
            </li>
            <li>
                <img src="./img/icon_message@2x.png">
                <span>系统消息</span>
                <span class="jf">12条</span>
            </li>
            <li>
            <img src="./img/icon_clean@2x.png">
            <span>清除缓存</span>
            <span class="jf">15KB</span>
            </li>
        </ul>
        <ul class="mymenuBox">
            <li>
            <img src="./img/icon_set@2x.png">
            <span>设置</span>
            </li>
        </ul>
    </div>
</template>

<script>
export default{}
</script>

<style lang="Sass">
@mixin transform ($sizing) {
    -webkit-transfrom:$sizing;
       -moz-transfrom:$sizing;
            transfrom:$sizing;
}
@mixin transition ($sizing) {
    -webkit-transition:$sizing;
       -moz-transition:$sizing;
            transition:$sizing;
}
    .myIndexBox{width: 100%; height: 100%; position: absolute; left: 0; top: 0;  background: #eee; z-index: 12;

      .myhead{width: 100%; height:9rem; background: #fff; padding-top: 2rem; box-sizing:border-box;

        .myheadWarp{width: 4.25rem; height: 4.25rem; margin: 0 auto; border-radius: 50%; border:.1rem solid #ccc; background: #fff;}
        h3{ font-size: .8rem; color: #000; text-align: center; font-weight: normal; margin-top: .5rem;}
      }
      .mymenuBox{width: 100%; background: #fff; margin-top: .5rem; list-style: none;

        li{width: 100%; height:2.5rem; line-height: 2.5rem; border-bottom: .05rem solid #e8e8e8;

          img{width: 1.5rem; height: 1.5rem; margin-left: 1rem;display: inline-block; vertical-align: top; margin-top: .5rem;}
          span{display: inline-block; vertical-align: top; margin-left: .5rem; color: #000;}
          .jf{float: right; color: #ccc; vertical-align: top;  margin-right: .5rem; font-size: .65rem;}
        }
      }
    }
</style>